<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ param['info']['name'] }}-{{ param['info']['version'] }}-{{ param['info']['release'] }}</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		*::-webkit-scrollbar {
			display: none;
		}

		#app{
			display: none;
		}

		.header {
			background: #333;
			position: sticky;
			top: 0;
			z-index: 99;
		}

		.header-inner {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.header .logo {
			height: 46px;
			cursor: pointer;
		}

		.container {
			width: 1200px;
			margin: 0 auto;
		}

		.tabs {
			margin: 10px 0;
		}

		.el-descriptions-item__label {
			width: 300px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<div class="container">
				<div class="header-inner">
					<img @click="goIndex()" class="logo"
						src=""
						alt="">
				</div>
			</div>
		</div>
		<div class="container">
			<el-tabs v-model="activeName" class="tabs">
				<el-tab-pane label="描述" name="1">
					<el-descriptions size="mini" class="descriptions" :column="1" border>
						{% for k, v in param['info'].items() %}
						<el-descriptions-item label="{{ k }}">{{ v }}</el-descriptions-item>
						{% endfor %}
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="下载" name="2">
					<el-descriptions size="mini" class="descriptions" :column="1" border>
						<el-descriptions-item label="url">
							<el-link style="font-size: 12px;" type="primary" href="{{ param['url'] }}">{{ param['url'] }}</el-link>
						</el-descriptions-item>
						<el-descriptions-item label="Search SRPM">
							<el-link style="font-size: 12px;" target="_blank" type="primary" href="{{ param['search_srpm_same_os'] }}">{{
								param['info']['name'] }} in this
								os</el-link>
							<br />
							<el-link style="font-size: 12px;" target="_blank" type="primary" href="{{ param['search_srpm_all_os'] }}">{{
								param['info']['name'] }} in all
								os</el-link>
						</el-descriptions-item>
						<el-descriptions-item label="Search gitee">
							<el-link style="font-size: 12px;" target="_blank" type="primary" href="{{ param['search_gitee_same_os'] }}">{{
								param['info']['name'] }} in this
								os</el-link>
							<br />
							<el-link style="font-size: 12px;" target="_blank" type="primary" href="{{ param['search_gitee_all_os'] }}">{{
								param['info']['name'] }} in all
								os</el-link>
						</el-descriptions-item>
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="提供" name="3">
					<el-descriptions size="mini" class="descriptions" :column="1" border>
						{% for provide, flags in param['provides'] %}
						<el-descriptions-item label="{{ provide }}">{{ flags }}</el-descriptions-item>
						{% endfor %}
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="依赖" name="4">
					<el-descriptions size="mini" class="descriptions" :column="1" border>
						{% for require, flags in param['requires'] %}
						<el-descriptions-item label="{{ require }}">{{ flags }}</el-descriptions-item>
						{% endfor %}
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="文件列表" name="5">
					{% for file in param['filelists'] %}
					<el-tag type="info" size="small" style="margin-bottom: 10px;">{{ file }}</el-tag>
					<br />
					{% endfor %}
				</el-tab-pane>
				</el-collapse>
		</div>
	</div>
</body>

<script type="module">
	new Vue({
		el: '#app',
		data: function () {
			return {
				activeName: "1"
			}
		},
		mounted() {
			document.getElementById("app").style.display="block"
		},
		methods: {
			goIndex(){
				window.location.href = window.location.origin
			}
		},
	})
</script>

</html>